<script setup lang="ts">
import huntingBg from "@/assets/images/hunting-bg.png";
import logo from "@/assets/images/logo.png";

defineProps({
	imgBg: {
		type: String,
		default: huntingBg
	}
});
const tabsList = [
	{ name: "HOME", path: "/" },
	{ name: "ABOUT CITECT", path: "/about" },
	{ name: "SERVICES", path: "/services" },
	{ name: "EXPERIENCE", path: "/experience" },
	{ name: "CONTACT", path: "/contact" }
];
</script>

<template>
	<div>
		<div class="hidden md:block">
			<div class="min-h-[100vh] w-full page-pc-bg" :style="{ backgroundImage: `url(${imgBg})` }">
				<div class="h-[63px]"></div>
				<slot name="head">
					<div class="h-[90px] w-full head-bg text-white flex justify-center items-center">
						<img :src="logo" alt="" class="w-[200px] h-[67px] mr-15" />
						<div class="flex items-center" v-for="(item, index) in tabsList" :key="index">
							<div class="h-[30px] bg-white w-[1px] mx-5" v-if="index > 0"></div>
							<router-link class="text-[12px] text-white no-underline" :to="item.path">{{ item.name }}</router-link>
						</div>
					</div>
				</slot>
				<div class="mt-15 mb-10 w-[1280px] mx-auto">
					<div class="h-[1px] w-full bg-white"></div>
					<div class="h-[2px] w-full bg-white mt-2"></div>
					<slot></slot>
					<div class="h-[1px] w-full bg-white"></div>
					<div class="h-[2px] w-full bg-white mt-2"></div>
				</div>
				<slot name="footer">
					<div class="h-[90px] w-full head-bg text-white flex justify-center items-center">Confidential, Copyright 2022</div>
				</slot>
			</div>
		</div>
		<div class="md:hidden block">
			<div class="min-h-[100vh] page-mobile-bg" :style="{ backgroundImage: `url(${imgBg})` }">
				<el-dropdown>
					<div class="fixed top-8 right-8 text-white z-50">
						<el-icon :size="30"><Operation /></el-icon>
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in tabsList" :key="index">
								<router-link class="no-underline text-black" :to="item.path">{{ item.name }}</router-link>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<slot name="head">
					<div class="h-[50px] w-full head-bg text-white flex justify-center items-center relative">
						<img
							:src="logo"
							alt=""
							class="w-[100px] h-[33px] absolute left-[50%] top-[20%]"
							style="transform: translateX(-50%)"
						/>
					</div>
					<div class="h-[90px]"></div>
				</slot>
				<div class="p-5">
					<div class="h-[1px] w-full bg-white"></div>
					<div class="h-[2px] w-full bg-white mt-2"></div>
					<slot></slot>
					<div class="h-[1px] w-full bg-white"></div>
					<div class="h-[2px] w-full bg-white mt-2"></div>
				</div>
				<slot name="footer">
					<div class="h-[65px] w-full head-bg text-white flex justify-center items-center">Confidential, Copyright 2022</div>
				</slot>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.page-pc-bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	.head-bg {
		background-color: rgba(0, 0, 0, 0.5);
	}
}
.page-mobile-bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	.head-bg {
		background-color: rgba(0, 0, 0, 0.5);
	}
}
</style>
